<template>
    <div>
      <div class="page_tab_top">
        <div
          class="tab_list_item"
          @click="cutTab(1)"
          :class="currentIndex === 1 ? 'tab_active' : ''"
        >
          楼层管理
        </div>
        <div
          class="tab_list_item"
          @click="cutTab(2)"
          :class="currentIndex === 2 ? 'tab_active' : ''"
        >
          分类管理
        </div>
        <div
          class="tab_list_item"
          @click="cutTab(3)"
          :class="currentIndex === 3 ? 'tab_active' : ''"
        >
          床位管理
        </div>
      </div>
      <floor
        ref="floor"
        v-show="this.currentIndex === 1"
      ></floor>
      <sort
        ref="sort"
        v-show="this.currentIndex === 2"
      ></sort>
      <bed ref="bed" v-show="this.currentIndex === 3"></bed>
    </div>
  </template>
  
  <script>
  import floor from "./floor.vue";
  import sort from "./sort.vue";
  import bed from "./bed.vue";
  export default {
    components: { floor,sort, bed },
    name: "EryuoaStoreFrontendIndex",
  
    data() {
      return {
        currentIndex: 1,
      };
    },
  
    mounted() {
      this.$nextTick(()=>{
      this.changeChild()
    })
    },
  
    methods: {
      //  // 顶部tab切换
      cutTab(i) {
        this.currentIndex = i;
        this.changeChild();
      },

      changeChild(){
        if(this.currentIndex ===1){
          this.$refs.floor.resQ()
        }else if(this.currentIndex ===2){
          this.$refs.sort.resQ()
        }else if(this.currentIndex ===3){
          this.$refs.bed.resQ()
        }
      }
    },
  };
  </script>
  
  <style lang="scss" scoped>
  </style>